{% extends "layout.html" %}

{% block content %}
<script src="../static/js/jquery.min.js" type="text/javascript" charset='utf-8'></script>
<script src="../static/js/echarts.js" charset='utf-8'></script>
<script src="../static/js/echarts-wordcloud.min.js" type="text/javascript" charset='utf-8'></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>

<script type="text/javascript">
    // 初始化界面
    $(function () {
        $.ajaxSetup({async: false});

        $('#li_1').attr('class', '');
        $('#li_2').attr('class', 'active');
        $('#li_3').attr('class', '');
        $('#li_4').attr('class', '');

        // 判断是否登录
        $.get('http://127.0.0.1:5000/check_login', {},
            function (data) {
                console.log(data);
                if (data['login'] === false) {
                    window.location.href = '/'
                }
                else {
                    $('#show_login_reg').hide();
                    $('#index_img').css('height', '95%');
                }
            }
        );
        
        function draw_echarts(brand) {
            $.get('http://127.0.0.1:5001/brand_score/车系/' + brand, {},
                function (data) {
                    console.log(data);
                    var dom = document.getElementById("main1");
                    var myChart = echarts.init(dom);
                    
                    var option = {
                        backgroundColor: '#F9F9F9',
                        title: {
                            left: 'center',
                            text: '不同车系的汽车平均评分分布情况',
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '5%',
                            right: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        yAxis: {
                            name: '平均评分',
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            min: (data['min_score'] - 0.01).toFixed(2),  //取0为最小刻度
                            max: (data['max_score'] + 0.01).toFixed(2), //取100为最大刻度 
                        },
                        xAxis: {
                            type: 'category',
                            data: data['jibie'],
                            axisLabel: {
                                interval: 0,
                                rotate: 45
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                itemStyle: {
                                    color: '#19CAAD'
                                },
                                data: data['scores']
                            }
                        ]
                    };

                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                }
            );

            $.get('http://127.0.0.1:5001/brand_score/级别/' + brand, {},
                function (data) {
                    console.log(data);
                    var dom = document.getElementById("main2");
                    var myChart = echarts.init(dom);
                    
                    var option = {
                        backgroundColor: '#F9F9F9',
                        title: {
                            left: 'center',
                            text: '不同车型级别的汽车平均评分分布情况',
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '5%',
                            right: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        yAxis: {
                            name: '平均评分',
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            min: (data['min_score'] - 0.01).toFixed(2),  //取0为最小刻度
                            max: (data['max_score'] + 0.01).toFixed(2), //取100为最大刻度 
                        },
                        xAxis: {
                            type: 'category',
                            data: data['jibie'],
                            axisLabel: {
                                interval: 0,
                                rotate: 45
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                itemStyle: {
                                    color: '#6a6eca'
                                },
                                data: data['scores']
                            }
                        ]
                    };

                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                }
            );
        }
        function change_callback() {
            var cb = $("#chose_brand").val();
            draw_echarts(cb);
        }

        $.get('http://127.0.0.1:5001/get_all_brands', {},
            function (results) {
                for (var i = 0; i < results.length; i++) {
                    $('#chose_brand').append('<option value="' + results[i] + '">' + results[i] + '</option>');
                    $('#chose_brand2').append('<option value="' + results[i] + '">' + results[i] + '</option>');
                }
            }
        );

        $('#chose_brand').on('change', change_callback);
        // 获取第一个有效时间的产量等数据
        const hy = $('#chose_brand option:first-child').val();
        draw_echarts(hy);
        
        function draw_table(cbrand) {
            $('#result_items').empty();
            $.get('http://127.0.0.1:5001/top20_score/' + cbrand, {},
                function (html) {
                    $('#result_items').append(html)
                }
            );
        }

        function change_callback2() {
            var cb = $("#chose_brand2").val();
            draw_table(cb);
        }
        $('#chose_brand2').on('change', change_callback2);
    });
</script>

<div class="container">
    <h3 class="page-header">汽车品牌的平均评分分布情况</h3>
    <div class="col-sm-10" style="font-size: 20px; margin-bottom: 20px;">
        <span>选择汽车品牌行业：</span>
        <select class="combobox" id="chose_brand" style="margin-left: 10px; margin-right: 20px;">
        </select>
    </div>
    <div class="row placeholders" style="margin-top: 2px;">
        <div class="col-xs-6 placeholder" style="height:500px;" id="main1"></div>
        <div class="col-xs-6 placeholder" style="height:500px;" id="main2"></div>
    </div>

    <h3 class="page-header">各汽车品牌的评分最高Top10</h3>
    <div class="col-sm-10" style="font-size: 20px; margin-bottom: 20px;">
        <span>选择汽车品牌行业：</span>
        <select class="combobox" id="chose_brand2" style="margin-left: 10px; margin-right: 20px;">
        </select>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <table id="result_items" class="table table-striped table-hover" style="margin-top: 20px; font-size: 18px" align="left">
                
            </table>
        </div>
    </div>

</div>
{% endblock %}
